<template>
	<view class="wxScan_car">
		<cover-view class="menu" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }">
			<cover-image class="menu-back" @tap="back" src="../../static/images/back_black_icon.png"></cover-image>
			<cover-view class="menu_body" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }">
				<cover-view class="menu_mask"
					:style="{ width: windowWidth + 'px', height: windowHeight * 0.2 + 'px' }"></cover-view>
				<cover-view class="menu_center" :style="{ width: windowWidth + 'px'}">
					<cover-view class="menu_top">将二维码放入框内识别</cover-view>
					<cover-view class="menu_lefts"
						:style="{width: windowWidth * 0.1 + 'px', height: '580rpx'}"></cover-view>
					<cover-view class="menu_scan" :style="{ width: windowWidth * 0.80 + 'px'}">
						<cover-view class="border_corner border_corner_left_top"></cover-view>
						<cover-view class="border_corner border_corner_left_top_h"></cover-view>
						<cover-view class="border_corner border_corner_right_top"></cover-view>
						<cover-view class="border_corner border_corner_right_top_h"></cover-view>
						<cover-view class="border_corner border_corner_left_bottom"></cover-view>
						<cover-view class="border_corner border_corner_left_bottom_h"></cover-view>
						<cover-view class="border_corner border_corner_right_bottom"></cover-view>
						<cover-view class="border_corner border_corner_right_bottom_h"></cover-view>
					</cover-view>

					<cover-view class="menu_lefts"
						:style="{width: windowWidth * 0.1 + 'px', height: '580rpx'}"></cover-view>
				</cover-view>
				<cover-view class="menu_mask menu_mask1"
					:style="{ width: windowWidth + 'px', height: windowHeight * 0.4 + 'px' }">
				</cover-view>
			</cover-view>
		</cover-view>
		<camera @scancode="scancode" @initdone="initdone" mode="scanCode" device-position="back" flash="off"
			@error="error" style="width: 100vw; height: 100vh;"></camera>
	</view>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		navTo,
		showTost
	} from '../../utils/common';
	import {
		onLoad,
	} from '@dcloudio/uni-app'


	const ctx = ref(null)
	const windowWidth = ref(0)
	const windowHeight = ref(0)
	const code = ref('')

	onLoad(() => {
		uni.showLoading({
			title: '初始化中...',
			mask: true
		})
	})
	onMounted(() => {
		uni.getSystemInfo({
			success: (res) => {
				windowWidth.value = res.screenWidth;
				windowHeight.value = res.screenHeight;
			},
		});
	})
	const initdone = () => {
		ctx.value = uni.createCameraContext();
		uni.hideLoading();
	}

	const scancode = (e : { detail : { result : string } }) => {
		code.value = e.detail.result
		showTost('识别成功', () => {
			back()
			uni.$emit('changeCode', { code: code.value })
		}, 1000)
	}

	const error = () => {
		showTost('未开启摄像头权限，请开启后重试')
	}
	const back = () => {
		navTo('', 'navigateBack')
	}
</script>

<style lang="scss" scoped>
	.wxScan_car {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: relative;

		.menu-back {
			position: absolute;
			left: 48rpx;
			top: 88rpx;
			width: 64rpx;
			height: 64rpx;
			z-index: 99;
			align-items: center;
			justify-content: center;
		}

		.scan_body {
			position: absolute;
			width: 90%;
			margin-left: 5%;
			height: 400rpx;
			// background-color: red;
			border: 40rpx solid rgba(0, 0, 0, 0.4);
			z-index: 8;
			top: 20%;



			.body {
				width: 100%;
				height: 100%;

			}
		}

		.menu {
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 9;
			align-items: center;
			justify-content: center;
		}

		.menu_body {
			position: absolute;
			z-index: 10;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		.menu_mask {
			background-color: rgba(0, 0, 0, 0.5);
		}

		.menu_mask1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			/* margin-top: -0.5rpx; */
		}

		.menu_center {
			height: 580rpx;
			position: relative;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}

		.menu_top {
			position: absolute;
			font-size: 32rpx;
			font-weight: 500;
			color: #fff;
			z-index: 12;
		}

		.menu_lefts {
			background-color: rgba(0, 0, 0, 0.5);
		}

		.menu_scan {
			height: 580rpx;
			position: relative;
		}

		.border_corner {
			z-index: 11;
			position: absolute;
			width: 32rpx;
			height: 12rpx;
			background-color: #FB652E;
		}

		.border_corner_left_top {
			top: 0;
			left: 0;
		}

		.border_corner_left_top_h {
			width: 12rpx;
			height: 32rpx;
			top: 0;
			left: 0;
		}

		.border_corner_right_top {
			top: 0;
			right: 0;
		}

		.border_corner_right_top_h {
			width: 12rpx;
			height: 32rpx;
			top: 0;
			right: 0;
		}

		.border_corner_left_bottom {
			bottom: 0;
			left: 0;
		}

		.border_corner_left_bottom_h {
			width: 12rpx;
			height: 32rpx;
			bottom: 0;
			left: 0;
		}

		.border_corner_right_bottom {
			bottom: 0;
			right: 0;
		}

		.border_corner_right_bottom_h {
			width: 12rpx;
			height: 32rpx;
			bottom: 0;
			right: 0;
		}
	}
</style>